<?php
$min = [
    '00','01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
    '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
    '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
    '31', '32', '33', '34', '35', '36', '37', '38', '39', '40',
    '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
    '51', '52', '53', '54', '55', '56', '57', '58', '59',
];
?>
<style>
    #time{cursor: pointer;}
    .dateTime{padding: 0 60px;margin-top: 86px;}
    .dateTime .dateTime-list {margin-bottom: 20px;}
    .dateTime .name{width: 85px;text-align: right;display: inline-block;margin-right: 20px;}
    .dateTime .select {width: 101px;height: 34px;}
    .dateTime input[type="text"] {width: 256px;height: 34px;}
    .dateTime .ok,.dateTime .rest{background-color: #fe7b9d;color: #fff;border-radius: 5px;padding: 5px 31px;}
    .dateTime .ok:hover{
        background-color: #d0366a;
    }
    .dateTime .rest{background-color: #a4a9ad;}
    .dateTime .rest:hover{background-color: #e5e5e5;}
</style>
<div class="dateTime">
    <form onsubmit="return false">
        <div class="dateTime-list">
            <span class="name">预约服务日期</span>
            <input id="time" name="make_time" class="laydate-icon" type="text" data-rule="required;" readonly/>
        </div>
        <div class="dateTime-list">
            <span class="name">时间</span>
            <div class="select">
                <select name="h">
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                </select>
            </div>
            <span style="margin:0 16px;">时</span>
            <div class="select">
                <select name="i">

                    <?php foreach($min as $i): ?>
                        <option value="<?= $i ?>"><?= $i ?></option>
                    <?php endforeach; ?>

                </select>
            </div>
            <span>分</span>
        </div>
        <div class="text-center">
            <input class="ok mr20" type="submit" value="确定"/><input class="rest" type="reset" value="取消"/>
        </div>
    </form>
</div>


<?php $this->beginBlock('js_index_end') ?>
$(function(){
    laydate({
        elem: '#time',
        choose: function (datas) { //选择日期完毕的回调
        $("input[name='now_time']").val(datas);
        },
        min: laydate.now()
    });


    var index = parent.layer.getFrameIndex(window.name);
    $('input[type="reset"]').click(function(){
        parent.layer.close(index);
    });

    $('.ok').click(function(){
         var dates =  $('input[name="make_time"]').val();
        if (!dates) {
            return
        }else {
            var h = $('select[name="h"]').val();
            var i = $('select[name="i"]').val();
            dates = dates + ' ' + h + ':' + i + '';

            parent.$('input[name="make_time"]').val(dates);
            parent.$('.last').show();
            parent.$('.times').text(dates);
            parent.layer.close(index);
        }

    });



})

<?php $this->endBlock() ?>
<?php $this->registerJs($this->blocks['js_index_end'], $this::POS_END); ?>

